<!doctype html>
<html>
<?php
 require_once ("../include.php");
 if (!($r = @$_REQUEST['r'])) $r = 127 ;
 if (!($g = @$_REQUEST['g'])) $g = 127 ;
 if (!($b = @$_REQUEST['b'])) $b = 127 ;
 
 $s = $r.",".$g.",".$b;
?>
<body>
<canvas id='face' width=500 height=500 style='border=1px solid #000000;'>
</canvas>
<div id=links width=500 height=500 style='border=1px solid #000000;position'>
<a id='l1' href=abc>Value1</a>
<a id='l2' href=abc>Value2</a>
<a id='l3' href=abc>Value3</a>
<a id='l4' href=abc>Value4</a>
</div>
</body>

<script>
 var aeyecolor = [<?php echo $s?>];
 var eyegap = 20
 var openness = 30 
 var eyewidth = 60
 var c=document.getElementById("face")
 var ctx=c.getContext("2d")

 function eye(ec) {
  ctx.beginPath()
  ctx.bezierCurveTo(eyesp,eyehv,eyewidth/2+eyesp,eyehv+openness,eyesp+eyewidth,eyehv)
  ctx.stroke()
  ctx.beginPath()
  ctx.bezierCurveTo(eyesp,eyehv,eyewidth/2+eyesp,eyehv-openness,eyesp+eyewidth,eyehv)
  ctx.stroke()
  ctx.beginPath()

  ctx.fillStyle = ec
	
  ctx.arc(eyesp+eyewidth/2, eyehv, openness/2-2, eyesp+eyewidth/2, Math.PI * 2, true)
  ctx.fill()
  ctx.beginPath()
  ctx.fillStyle = '000000'
  ctx.arc(eyesp+eyewidth/2, eyehv, 6, eyesp+eyewidth/2, Math.PI * 2, false)
  ctx.fill()
 }
 var l = 1 
 for (var eyehv=30;eyehv<200;eyehv = eyehv+50) {
  var eyesp = 20;
	// mutate eyecolor
	var r = Math.min(255,Math.max(0,aeyecolor[0]+Math.floor((Math.random()*40)-20)));
	var g = Math.min(255,Math.max(0,aeyecolor[1]+Math.floor((Math.random()*40)-20)));
	var b = Math.min(255,Math.max(0,aeyecolor[2]+Math.floor((Math.random()*40)-20)));
	document.getElementById('l'+l).href = '?r='+r+'&g='+g+'&b='+b
	var ec = "rgb("+r+","+g+","+b+")";
  eye(ec)
	eyesp = eyesp + eyewidth+eyegap
  eye(ec)
	l = l + 1 
 }
 
</script>
</html>
